$(window).load(function () {
    $('.loading').fadeOut('fast');
    let m=1
    let po =setInterval(()=>{
        m-=0.1
        document.getElementsByClassName("tipsText")[0].style.opacity=m
        if (m<=0){
            clearInterval(po)
        }
    },100)
    $('.container').fadeIn('fast');
});
$('document').ready(function () {
    var vw;
    $(window).resize(function () {
        vw = $(window).width() / 2;
        $('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop();
        $('#b11').animate({ top: 70, left: vw - 350 }, 500);
        $('#b22').animate({ top: 70, left: vw - 250 }, 500);
        $('#b33').animate({ top: 70, left: vw - 150 }, 500);
        $('#b44').animate({ top: 70, left: vw - 50 }, 500);
        $('#b55').animate({ top: 70, left: vw + 50 }, 500);
        $('#b66').animate({ top: 70, left: vw + 150 }, 500);
        $('#b77').animate({ top: 70, left: vw + 250 }, 500);
    });
    var t= "要带好耳机观看哦"
    let i1=0
    var v=setInterval(()=>{
        document.getElementsByClassName("tipsText")[0].innerHTML=t.slice(0,i1)
        if (i1==t.length){
            clearInterval(v)
        }
        i1++
    },200)
    $('#turn_on').click(function () {
        $('#bulb_yellow').addClass('bulb-glow-yellow');
        $('#bulb_red').addClass('bulb-glow-red');
        $('#bulb_blue').addClass('bulb-glow-blue');
        $('#bulb_green').addClass('bulb-glow-green');
        $('#bulb_pink').addClass('bulb-glow-pink');
        $('#bulb_orange').addClass('bulb-glow-orange');
        $('body').addClass('peach');
        $(this)
            .fadeOut('slow')
            .delay(5000)
            .promise()
            .done(function () {
                $('#play').fadeIn('slow');
            });
    });
    $('#play').click(function () {
        var audio = $('.song')[0];
        audio.play();
        $('#bulb_yellow').addClass('bulb-glow-yellow-after');
        $('#bulb_red').addClass('bulb-glow-red-after');
        $('#bulb_blue').addClass('bulb-glow-blue-after');
        $('#bulb_green').addClass('bulb-glow-green-after');
        $('#bulb_pink').addClass('bulb-glow-pink-after');
        $('#bulb_orange').addClass('bulb-glow-orange-after');
        $('body').css('backgroud-color', '#FFF');
        $('body').addClass('peach-after');
        $(this)
            .fadeOut('slow')
            .delay(6000)
            .promise()
            .done(function () {
                $('#bannar_coming').fadeIn('slow');
            });
    });

    $('#bannar_coming').click(function () {
        $('.bannar').addClass('bannar-come');
        $(this)
            .fadeOut('slow')
            .delay(6000)
            .promise()
            .done(function () {
                $('#balloons_flying').fadeIn('slow');
            });
    });

    function loopOne() {
        var randleft = 1000 * Math.random();
        var randtop = 500 * Math.random();
        $('#b1').animate(
            { left: randleft, bottom: randtop },
            10000,
            function () {
                loopOne();
            }
        );
    }
    function loopTwo() {
        var randleft = 1000 * Math.random();
        var randtop = 500 * Math.random();
        $('#b2').animate(
            { left: randleft, bottom: randtop },
            10000,
            function () {
                loopTwo();
            }
        );
    }
    function loopThree() {
        var randleft = 1000 * Math.random();
        var randtop = 500 * Math.random();
        $('#b3').animate(
            { left: randleft, bottom: randtop },
            10000,
            function () {
                loopThree();
            }
        );
    }
    function loopFour() {
        var randleft = 1000 * Math.random();
        var randtop = 500 * Math.random();
        $('#b4').animate(
            { left: randleft, bottom: randtop },
            10000,
            function () {
                loopFour();
            }
        );
    }
    function loopFive() {
        var randleft = 1000 * Math.random();
        var randtop = 500 * Math.random();
        $('#b5').animate(
            { left: randleft, bottom: randtop },
            10000,
            function () {
                loopFive();
            }
        );
    }

    function loopSix() {
        var randleft = 1000 * Math.random();
        var randtop = 500 * Math.random();
        $('#b6').animate(
            { left: randleft, bottom: randtop },
            10000,
            function () {
                loopSix();
            }
        );
    }
    function loopSeven() {
        var randleft = 1000 * Math.random();
        var randtop = 500 * Math.random();
        $('#b7').animate(
            { left: randleft, bottom: randtop },
            10000,
            function () {
                loopSeven();
            }
        );
    }

    $('#balloons_flying').click(function () {
        $('.balloon-border').animate({ top: -500 }, 8000);
        $('#b1,#b4,#b5,#b7').addClass('balloons-rotate-behaviour-one');
        $('#b2,#b3,#b6').addClass('balloons-rotate-behaviour-two');
        // $('#b3').addClass('balloons-rotate-behaviour-two');
        // $('#b4').addClass('balloons-rotate-behaviour-one');
        // $('#b5').addClass('balloons-rotate-behaviour-one');
        // $('#b6').addClass('balloons-rotate-behaviour-two');
        // $('#b7').addClass('balloons-rotate-behaviour-one');
        loopOne();
        loopTwo();
        loopThree();
        loopFour();
        loopFive();
        loopSix();
        loopSeven();

        $(this)
            .fadeOut('slow')
            .delay(5000)
            .promise()
            .done(function () {
                $('#cake_fadein').fadeIn('slow');
            });
    });

    $('#cake_fadein').click(function () {
        $('.cake').fadeIn('slow');
        $(this)
            .fadeOut('slow')
            .delay(3000)
            .promise()
            .done(function () {
                $('#light_candle').fadeIn('slow');
            });
    });
    var audiot = $('.song')[0];
    $('#light_candle').click(function () {
        $('.fuego').fadeIn('slow').promise().done(()=>{
            $('#light_candle')
            .fadeOut('slow')
            .promise()
            .done(function () {
                setTimeout(()=>{
                    $('#showme').fadeIn('slow');
                },1000)
               
            });
        });
       
    });
    $('#showme').click(function () {
        audiot.pause();
        var audio1 = $('.birsong')[0];
        audio1.play();
        setTimeout(()=>{
            audiot.play();
            $('.cake').fadeOut('slow')

            var d= "当然有为今天的公主准备礼物啦，猜猜看吧！"
            var ind =0
            document.getElementsByClassName("giftGuess")[0].style.opacity=1
            var s1=setInterval(()=>{
                document.getElementsByClassName("guessText")[0].innerHTML=d.slice(0,ind)
                    ind++
                    if (ind == d.length+1){
                        clearInterval(s1)
                        $(".giftGuess").fadeOut("slow").promise().done(()=>{
                            $('.gift').fadeIn('slow').promise().done(()=>{
                                $('#openGift').fadeIn('slow');
                            })
                        })
                }
            },200)
        },1000*17)
        $(this)
            .fadeOut('slow')
            .promise()
    });

    var desc="是月光石手链啦，第一次看到月光石，看到它泛出的淡淡蓝光，清冷又温柔，让我想到了你，真的是很符合你气质的宝石，上次给你看了图片，你说好看，就给你准备了这个，银制的手链你带上肯定超好看。月光石可以安眠，安抚情绪，减缓焦虑，希望你带上它可以减少emo，夜夜好眠。很想亲手送给你，但现在还是暂存在我这吧"
    $('#openGift').click(function () {
        $('.gift').fadeOut('slow').promise().done(()=>{
            var ind=1
            var m=0
            var g1=setInterval(()=>{
                m+=0.1
                document.getElementsByClassName("giftBox")[0].style.opacity=m
                // $('.giftBox').opacity=m
                console.log(m)
                if (m>1){
                    clearInterval(g1)
                    var p =setInterval(()=>{
                        document.getElementsByClassName("text")[0].innerHTML=desc.slice(0,ind)
                        console.log(desc.slice(0,ind))
                        ind++
                        if (ind ==desc.length+1){
                            $('#wish_message').fadeIn('slow');
                            clearInterval(p)
                        }
                    },200)
                }
            },25)
        })
       
       
        // $('.giftBox').fadeIn('slow').promise().done(()=>{
           
        // })
        $(this)
            .fadeOut('slow')
            .promise()
            .done(function () {
            });
    });

    $('#wish_message').click(function () {
        $('.desc').fadeOut("slow")

        vw = $(window).width() / 2;

        $('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop();
        $('#b1').attr('id', 'b11');
        $('#b2').attr('id', 'b22');
        $('#b3').attr('id', 'b33');
        $('#b4').attr('id', 'b44');
        $('#b5').attr('id', 'b55');
        $('#b6').attr('id', 'b66');
        $('#b7').attr('id', 'b77');
        $('#b11').animate({ top: 70, left: vw - 350 }, 500);
        $('#b22').animate({ top: 70, left: vw - 250 }, 500);
        $('#b33').animate({ top: 70, left: vw - 150 }, 500);
        $('#b44').animate({ top: 70, left: vw - 50 }, 500);
        $('#b55').animate({ top: 70, left: vw + 50 }, 500);
        $('#b66').animate({ top: 70, left: vw + 150 }, 500);
        $('#b77').animate({ top: 70, left: vw + 250 }, 500);
        $('.balloons').css('opacity', '0.9');
        $('.balloons h2').fadeIn(3000);
        var d1=["生日快乐，希望盈盈小公主在接下来的一年里，开开心心，工作顺利，烦恼都走开。时间过得好快啊，距我们第一次见面应该是正好四年了吧，要是让四年前的我知道那个在会上一瞥的女孩要和自己发生那么多事，应该会很不可思议吧。我也很迷茫，记得那天去看长安三万里，电影里的舞姬翩翩起舞，罗裙翻飞，在那一瞬间我的脑海里竟然是你穿着邻家的长裙，优雅的轻旋一圈，裙摆旋转着微微扬起又轻轻落下，真美啊！我一下就明白自己最想要的是什么。但我也没办法做太多，也没法像电视剧里一样感人肺腑，我能做的就是踩好自己的每一步。有时我在想你要不是我的第一次那该多好，那我也不会走的这样笨拙，可你要不是我的初恋，那又有多遗憾。但总归事情没有变的太差。"
        ,"刚开始的时候，每次给你发消息对我来说都是挑战，因为大概率是不会有回信的，这种被自己心爱的姑娘无视的感觉真的很不好受,但也是你的错，毕竟我谁都不是，可是不给你发消息，如果你遇到困难，被人欺负，或者不开心emo孤独的时候，以你的性格大概会压在心里，如果你的室友在你身边都还好，现在你一人在北京，每次想到你要独自承受这些我又觉得心里难受，怕你在需要我的时候我不在，甚至于我都不知道你发生了什么。但我又怕给你发太多你会觉得我烦。现在就还好，我给你发消息也并不盯着手机期待你的回信，因为我开始慢慢的了解你，了解你的性格，并且理解你的行为和想法，你有时间有精力自然会回复我，如果你没回复也是因为忙或者你只想一个人刷刷手机，不想被人打扰。在你没回复的时候我自然会去做我自己的事，所以可能有时候比不得以前回复快，也请不要生气。我的消息你也不必勉强你自己回应，我不希望你勉强自己，这和我发消息的初心相悖，如果你不想回就不回，可你要是告诉我你在忙或者你想静静那我会很开心。"
    ,"刚刚在一起的时候，我一直觉得你过分的温柔得体，还觉得你真是好啊，直到后来我才发现，你是在我面前压抑了自己，我怎么有一点开心，又有一点难过，开心在你想让我看到一个知书达理，温文尔雅没有缺点的盈盈，难过在我没有接触到你更深的样子。也庆幸我们结束的早，让我还有时间。分开之后，我也以一个其他的身份开始了解你，也知道自己比想象中更爱你，非你莫属。而且比起之前的你，其实我更喜欢真实的你，你也不必事事得体，我喜欢你耍小性子，也喜欢你生气耍情绪的样子。你也不必事事完美，做你自己就好，你只要开心就好。"
    ,"盈盈，我希望你不开心的时候我能陪在你身边，我想给你买好看的裙子，想听你分享自己的快乐，也想分担你的焦虑，也想给你准备一个你的天地，客厅有大大的电视，沙发旁有柔软的毯子，你可以在毯子上开心的玩游戏，做想做的事，累了就休息。",
    "盈,以后无论如何我都会陪着你，理解你，守护你，为你准备你想要的。我爱你，盈。"]
    var sw =true
    var opa=0    
    var do1=(ind2)=>{
            let ind1=0
            if (ind2==d1.length){

                $('#story').fadeIn('slow');
                return
            }
            $('.msgText'+ind2).fadeIn('slow').promise().done(()=>{
                let dd =setInterval(()=>{
                    if (ind2<d1.length&&ind1<d1[ind2].length){
                        document.getElementsByClassName('msgText')[ind2].innerHTML+=d1[ind2][ind1]
                    }
                    if (ind2==4&&ind1==42 &&sw){
                        sw=false
                        var pp=setInterval(()=>{
                            opa+=0.4/7
                            document.getElementsByClassName("background")[0].style.opacity=opa
                            if (opa>0.4){
                                clearInterval(pp)
                            }
                        },140)

                    }
                    ind1+=1
                    if (ind1==d1[ind2].length+1){
                        clearInterval(dd)
                        if (ind2==d1.length-1){
                            do1(ind2+1)
                        }else{
                            setTimeout(()=>{
                                $('.msgText'+ind2).fadeOut('slow').promise().done(()=>{
                                    do1(ind2+1)
                                })
                              
                            },3000)
                           
                           
                        }
                        }
                        
                    
                },200)
            })  
        }
        $('.giftImg').fadeOut('slow').promise().done(()=>{
            $('.msg').fadeIn('fast').promise().done(()=>{
               do1(0)
            })
        })
        $(this)
            .fadeOut('slow')
            .delay(3000)
            .promise()
            .done(function () {
               
            });
    });

    $('#story').click(function () {
        $(this).fadeOut('slow');
      
        

        var i;

        function msgLoop(i) {
            $('p:nth-child(' + i + ')')
                .fadeOut('slow')
                .delay(800)
                .promise()
                .done(function () {
                    i = i + 1;
                    $('p:nth-child(' + i + ')')
                        .fadeIn('slow')
                        .delay(1000);
                    if (i == 50) {
                        $('p:nth-child(49)')
                            .fadeOut('slow')
                            .promise()
                            .done(function () {
                                $('.cake').fadeIn('fast');
																$('.love_text').css('display', 'block');
                            });
                    } else {
                        msgLoop(i);
                    }
                });
            // body...
        }

        // msgLoop(0);
        let ddd="笨蛋盈盈，俗话说军师不上战场，最后还是上了，以前我还想着自己怎么都不可能主动去追女孩子，直到遇到了你。我们其实很相似，有不相同，但是又互补，这让我忍不住的靠近你。看见你笑之后，其实我觉得周幽王做的也没错，不就是烽火戏诸侯嘛，要是能让你开心，我要天天戏给你看。我不会在南京久呆，再过一年左右你想去哪我们就去哪吧，你想回四川我们就回四川。我知道你可能还会有顾虑，但我会永远站在你这边，没有什么比你更重要了。以前我偷偷笑我爸是个耙耳朵，结果自己有过之而无不及，你生气了那我肯定第一个道歉，起冲突那肯定是我错，耙就耙，就耙你一个人，我乐意。你说我太理想，对待情感理想并不是一件坏事，我愿意为了你去做很多事，为你妥协很多事，也愿意为了你排除万难。所以，盈盈公主，让我做你的骑士好不好。"
        let ind =0
        $('.msgText4').fadeOut('slow').promise().done(()=>{
            $('.msgText5').fadeIn('slow').promise().done(()=>{
                let dd =setInterval(()=>{
                    if (ind<ddd.length){
                        document.getElementsByClassName('msgText')[5].innerHTML+=ddd[ind]
                    }
                    ind+=1
                    if (ind==ddd.length+1){
                        $('.msgText5').fadeOut('slow').promise().done(()=>{
                            audiot.pause()
                            document.getElementsByClassName("tipsText")[0].style.fontSize="32px"
                            document.getElementsByClassName("tipsText")[0].style.color="#969696"
                            document.getElementsByClassName("tipsText")[0].innerHTML="所以"
                            
                            let m =0
                            let md=setInterval(()=>{
                                m+=0.1
                                document.getElementsByClassName("tipsText")[0].style.opacity=m
                                if (m>=1){
                                    clearInterval(md)
                                    $(".tipsText").fadeOut("slow").promise().done(()=>{
                                        setTimeout(()=>{
                                            document.getElementsByClassName("tipsText")[0].innerHTML="<span class='gonzhu'>盈盈公主&nbsp;</span> "
                                            $(".tipsText").fadeIn("slow").promise().done(()=>{
                                                setTimeout(()=>{
                                                    let text=" 让我做你的骑士好不好"
                                                    setTimeout(()=>{
                                                        document.getElementsByClassName("tipsText")[0].innerHTML+="让"
                                                    },300)
                                                    setTimeout(()=>{
                                                        document.getElementsByClassName("tipsText")[0].innerHTML+="我"
                                                    },600)
                                                    setTimeout(()=>{
                                                        document.getElementsByClassName("tipsText")[0].innerHTML+="做"
                                                    },3000)
                                                    setTimeout(()=>{
                                                        document.getElementsByClassName("tipsText")[0].innerHTML+="你"
                                                    },5000)
                                                    setTimeout(()=>{
                                                        document.getElementsByClassName("tipsText")[0].innerHTML+="的"
                                                    },5300)
                                                    setTimeout(()=>{
                                                        document.getElementsByClassName("tipsText")[0].innerHTML+="骑士"
                                                    },5600)
                                                    setTimeout(()=>{
                                                        document.getElementsByClassName("tipsText")[0].innerHTML+="吧"
                                                        setTimeout(()=>{
                                                            $('.love_text').css('display', 'block');
                                                        },1500)
                                                    },6600)
                                                },500)
                                            })
                                        },500)
                                    })
                                }
                            },100)
                        })
                       
                        
                        
                        clearInterval(dd)
                    }
                },200)
            })  
        })
    });
});

//alert('hello');
